<template>
	<div class="appointment_course">

		<div class="header">
			<p>么牛瑜伽</p>
			<div class="nav">
				<ul>
					<li>
						<p>课程</p>
						<div class="about_li">
							<span>1</span>
							<font>节</font>
						</div>
					</li>
					<li>
						<p>时间</p>
						<div class="about_li">
							<span>60</span>
							<font>分钟</font>
						</div>
					</li>
					<li>
						<p>难度</p>
						<div class="about_li">
							<span>5</span>
							<font>星</font>
						</div>
					</li>
				</ul>
			</div>

			<div class="about_present">
				<button>课程介绍</button>
			</div>
		</div>
		
		 <div class="collage_money">
      <div class="collage_price">
        <span>￥49/</span>
        <font>人</font>
      </div>
      <div class="collage_no">
        <s>非会员:￥125/人</s>
      </div>
    </div>
    
     <div class="collage_tax">
      <div class="collage_join">
        <div class="collage_left">
          <p>我的优惠</p>
          <span>￥20</span>
           <!--v-if="seen9"-->
          <!--<span
            style="color: #f59c00;font-size:14px;background:#ffee9a;padding: 1px 5px;
    letter-spacing:0;line-height: 20px;"
          >元</span>-->
          <font style="color: #f59c00;font-size: 14px;background: #ffee9a;padding: 1px 5px;line-height: 20px">元</font>
          
          <!-- v-if="item.coupon_type=='3'|| item.coupon_type=='1'" -->
          <!--<span v-for="(item,index) in couponTax.slice(0,1)" :key="index">
            {{youhui}}
            <span style="display:none;">{{item.id}}</span>
          </span>-->
          <!-- 优惠券id -->
          <!-- 优惠券id结束 -->
        </div>
        <div class="collage_right">
          <p>查看</p>
        <i-icon type="enter" size="16"/>
        </div>
      </div>
    </div>
		
		 <div class="collage_insider">
      <div class="insider_left">
        <div class="insider_top">
          <div class="insider_self">
            <i>VIP</i>
            <span>专享</span>
          </div>
          <p>
            会员下单预计可节省
            <font>70</font>元
          </p>
        </div>
        <div class="insider_bottom">会员卡立享8折优惠</div>
      </div>
      <div class="insider_right">
        <span>开通会员</span>
        <i-icon type="enter" size="18" color="#303030" />
        <!--<i class="fa fa-angle-right" style="font-size:24px;color:#303030;"></i>-->
      </div>
    </div>
		
		
		

	</div>
</template>

<script>
	export default {
		data() {
			return {

			}
		}
	}
</script>

<style scoped>
	.header {
		width: 100%;
		height: 215px;
		background: red;
		background-size: 100% 100%;
		float: left;
	}
	
	.header p {
		text-align: center;
		color: #fff;
		font-size: 20px;
		letter-spacing: 3px;
		margin-top: 20px;
	}
	
	.header .nav {
		width: 70%;
		margin: 0 auto;
		margin-top: 10%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.header .nav ul {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.header .nav ul li {
		color: #fff;
		text-align: center;
	}
	
	.header .nav ul li p {
		color: #fff;
		line-height: 20px;
		font-size: 10px;
		letter-spacing: 1px;
		text-align: center;
	}
	
	.header .nav ul li .about_li {
		display: flex;
		justify-content: center;
		letter-spacing: 1px;
		line-height: 20px;
	}
	
	.header .nav ul li .about_li span {
		font-size: 15px;
	}
	
	.header .nav ul li .about_li font {
		font-size: 10px;
		margin-top: 1px;
	}
	
	.header .about_present {
		width: 75%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		margin: 14px auto;
		background: #2cabac;
	}
	
	.header .about_present button {
		width: 100%;
		height: 40px;
		text-align: center;
		line-height: 40px;
		background: #fed403;
		border: none;
		outline: none;
		color: #000;
		font-size: 15px;
		letter-spacing: 1px;
		border-radius: 6px;
	}
	
	.collage_money{
	width: 100%;
	padding:20px 15px;
    float: left;
    border-bottom: 10px solid #eeeeee;
    display: flex;
    justify-content: flex-start

}
.collage_money .collage_price{
	display: flex;
    align-items: center;
    justify-content: flex-start;
    font-weight: bold;
}
.collage_money .collage_price span{
    font-size: 23px;
	color: #444444;
}
.collage_money .collage_price font{
	font-size: 14px;
	color: #444444;
    padding-top: 2px;
}
.collage_money .collage_no{
    font-size: 11px;
    line-height: 26px;
    color: #606060;
    margin-top:4px;
    margin-left: 5px;
}
.collage_money .collage_no s{
    font-size: 10px;
    color: #606060;
    text-decoration:line-through;
}
.collage_tax{
    width: 100%;
	padding:20px 0;
    float: left;
}
.collage_tax .collage_join{
	width: 92%;
	margin:0 auto;
	display: flex;
    align-items: center;
    justify-content: space-between;
}
.collage_tax .collage_join .collage_left{
    display: flex;
    align-items: center;
}
.collage_tax .collage_join .collage_left p{
    font-size: 14px;
    color: #7c7c7c;
}
.collage_tax .collage_join .collage_left>span{
    color: #f59c00;
    font-size: 14px;
    padding: 1px 5px;
    letter-spacing: 0;
    background: #ffee9a;
    line-height:20px;
    margin-left: 15px;
}
.collage_tax .collage_join .collage_right{
    display: flex;
    align-items: center;
}
.collage_tax .collage_join .collage_right p{
    font-size: 13px;
    color: #606060;
   padding-top: 3px;
   margin-right: 7px;
}
.collage_tax .collage_join .collage_right i-icon{
    color: #969696;
}

</style>